<template>
  <div>
    <div>
      <button @click="componentName='One'">One</button>
      <button @click="componentName='Two'">Two</button>
      <button @click="componentName='Three'">Three</button>
    </div>
    <!-- 动态组件:
        可以通过 Vue 的 <component> 元素加一个特殊的 is 属性 来实现动态组件
        is属性的值就是一个字符串,代表的就是要替换当前component组件的组件名称 -->
  
        <!-- 缓存组件
        <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
        属性:
          include属性:包含哪些组件需要被缓存
            字符串 'One,Two'
            数组  ['One','Two']
            正则 /One|Two/g

          exclude属性:包含哪些组件不需要被缓存,其他和include类似 -->
          <!-- <keep-alive include="One,Two">
            <component :is="componentName"></component>
          </keep-alive> -->
          <!-- <keep-alive include="['One','Two']">
            <component :is="componentName"></component>
          </keep-alive> -->
           <keep-alive include="/One|Two/g">
            <component :is="componentName"></component>
          </keep-alive>
  </div>
</template>

<script>
import One from '@/components/One'
import Two from '@/components/Two'
import Three from '@/components/Three'
export default {
name:"App",
components:{
  One,
  Two,
  Three
},
data(){
  return{
    componentName:"One"
  }
}
}
</script>

<style>

</style>